<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<title>大转盘抽奖</title>
		<link rel="stylesheet" href="css/style-promo.css?v=3" />
		<style>
			.loading-box {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: #fe3e2e;
				z-index: 9999;
			}
			
			.loading-box .loader {
				position: absolute;
				border-top: 0.3em solid rgba(255, 255, 255, 0.4);
				border-right: 0.3em solid rgba(255, 255, 255, 0.4);
				border-bottom: 0.3em solid rgba(255, 255, 255, 0.4);
				border-left: 0.3em solid #FFF;
				-webkit-animation: loading 1.1s infinite linear;
				animation: loading 1.1s infinite linear;
			}
			
			.loading-box .loader,
			.loading-box .loader:after {
				position: absolute;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				left: 50%;
				margin-left: -25px;
				top: 46%;
				margin-top: -25px;
			}
			
			.loader_txt {
				position: absolute;
				font-size: 28px;
				color: #FFF;
				width: 640px;
				height: auto;
				text-align: center;
				top: 52%;
				font-weight: bold;
			}
			
			@-webkit-keyframes loading {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
			
			@keyframes loading {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
			
			.qrPage {
				background-color: black;
				-webkit-transform: translate3d(0, -3000px, 0);
				transform: translate3d(0, -3000px, 0);
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: #000000;
				opacity: 0.9;
				z-index: 9000;
			}
		</style>		
	</head>
	<body>

		<!--loading -->
		<div class="loading-box">
			<div class="loader"></div>
			<div id="loader_txt" class="loader_txt">loading...0%</div>
		</div>

		<!--容器-->
		<div class="main">

			<!--分享提示页面-->
			<div id="shareTipsPage" class="shareTipsPage">
				<div class="shareTips"></div>
			</div>
			<!--提交失败-->
			<div id="qrPage" class="qrPage">
				<img style="position: absolute; top:308px ;left:222px;width: 190px;height: 190px; " src="img/QR-code.png">
			</div>
			<!--提交失败-->
			<div id="failPage" class="failPage" style="opacity: 0.9;">
				<div class="scaleBox">
					<div class="failBg">
						<div id="sorryFace" class="sorryFace"></div>
						<div class="sorryTipsTxt" id="sorryTipsTxt">
							十分抱歉~<br>您的微信号暂时无法领取此福利！
						</div>
						<div class="btn submBtn shareBtn" id="shareBtn">呼朋唤友</div>
						<div class="closeBtn" id="failCloseBtn"></div>
					</div>
				</div>
			</div>

		
			<!--提交成功-->
			<div id="succeedPage" class="succeedPage">
				<div class="scaleBox">
					<div class="succeedBg">
						<div class="fire"></div>
						<div class="prizeImg"></div>
						<div class="tips">快去【我的奖品】查看领取吧！</div>
						<div class="btn submBtn getOtherFL" id="failBackBtn">去领其它的福利</div>
						<div class="btn submBtn shareBtn" id="shareBtn">呼朋唤友再来一次</div>
						<div class="closeBtn" id="succeedCloseBtn"></div>
					</div>
				</div>
			</div>
			<!--规则页面-->
			<div id="rulePage" class="rulePage">
				<div class="scaleBox">
					<div class="ruleTitle"></div>
					<!--<div class="logo"></div>-->
					<div class="ruleBg">
						<p><span>1</span>活动兑奖时间：2017.8.26-31</p>
						<p><span>2</span>领取地点：奥特莱斯手机城；</p>
						<p><span>3</span>领取须知：旗舰手机（分别为OPPO R11、ivviK5、 ivviV3，数量有限，按系统出奖顺序兑机，分别是R11、 K5、V3，领完即止。)、蓝牙耳机、充电宝，需到指定 门店领取；门店地址：奥特莱斯手机城中华店（越秀区 较场西路19号）；
						</p>
						<p><span>4</span>参与用户：电信新老用户;</p>
						<p><span>5</span>参与方式：进店参与店庆抽奖后，即可参与本大转盘抽 奖一次；转发分享可享受多一次抽奖，共计两次；
						</p>
						<p><span>6</span>活动奖品数量有限，先到先得，如遇奖品已派发完，敬 请谅解；
						</p>
						<p><span>7</span>以上活动奖品仅供展示，请以工作人员实际派发为准；</p>
						<p><span>8</span>获得奖品后，可进入【我的奖品】点击领取，前往现场 于工作人员确认后发放；未给予工作人员确认自行点击 确认，视为奖励以发放；
						</p>
						<p><span>9</span>本活动最终解释权归广州电信所有。</p>

					</div>
					<!--<div class="ruleFooter"></div>-->
					<div class="ruleCloseBtn btn" id="ruleCloseBtn"></div>
				</div>
			</div>

			<!--我的奖品-->
			<div id="myPrizePage" class="myPrizePage">
				<div class="scaleBox">
					<div class="myPrizeTitle"></div>
					<div class="list">
						<ul id="myDataList">					
							<li class="item">
								<div class="prizeName">200元购机优惠券<br><span class="font18">出奖时间：2017-08-26  00:00:01</span></div>
								<div class="recevieBtn disabled">已领取</div>
								<div class="vLine"></div>
								<div class="link"></div>
							</li>
							<li class="item">
								<div class="prizeName">上门检测服务<br/><span class="font18">出奖时间：2017-08-26  00:00:01</span></div>
								<div class="recevieBtn">立即领取</div>
								<div class="vLine"></div>
								<div class="link"></div>
							</li>
						</ul>
						<div class="backBtn" id="myPrizeBackBtn">返回</div>
					</div>
				</div>
			</div>
			<!--现场领奖-->
			<div id="receivePrizePage" class="receivePrizePage">
				<div class="scaleBox">
					<div class="rePrizeTitle">领取注意</div>
					<div class="info">请凭此券现场出示给工作人员，由工作人员点击确认，未给工作人员确认自行点击确认领取，视为奖励已发放。</div>
					<div id="recevieBackBtn" class="recevieBackBtn">取消</div>
					<div id="confirmRecevieBtn" class="confirmRecevieBtn">确认领取</div>
					<div class="re_loaderBox" id="re_loaderBox">
						<div class="loader"></div>
					</div>
				</div>
			</div>

			<!--填写资料-->
			<div id="inputPage" class="inputPage">
				<div class="scaleCon ">
					<div class="inputBg">
						<div class="inputPageTitle"></div>
						<div class="login-bg"></div>
						<div class="inputBox">
							<div class="tel">
								<input id="tel_input" class="input-tel input-css" type="text" name="tel" value="" placeholder="填写领奖的手机号码" maxlength="11" />
								<input id="uuid" class="input-tel input-css" type="hidden" name="uuid" />
								<input id="isGetSmsCode" type="hidden" />
							</div>
							<div class="code">
								<input id="code_input" class="input-code input-css" type="text" name="code" value="" placeholder="填写验证码" maxlength="6" />
								<div class="getCodeBtn" id="getCodeBtn">获取验证码</div>
							</div>
						</div>
						<div class="btn submBtn" id="submBtn">立即领礼品</div>
						<div class="closeBtn" id="inputPageCloseBtn"></div>
					</div>
				</div>
			</div>

			<!--关注页-->
			<!--<div class="follow-page" style="display: none;">
				<div class="QR-code-bg">
					<img src="img/QR-code.png" style="width: 190px;height: 190px;display: inline-block;position: absolute;top: 58px;left: 76px;"/>
				</div>
				
			</div>-->

			<!--首页-->
			<div class="page1">
				<div class="pageCon">
					<div class="p1Bg"></div>

					<div class="logo"></div>

					<!--大转盘-->
					<div class="prRollBg" id="p1RollFingerBox">
						<div class="light" id="light"></div>
						<div class="prize-item" style="">
							<div style="background-image: url(img/Prize1.png);"></div>
							<p>旗舰手机</p>
						</div>
						<div class="prize-item" style="">
							<div style="background-image: url(img/Prize6.png);"></div>
							<p>上门检测服务</p>
						</div>
						<div class="prize-item" style="">
							<div style="background-image: url(img/Prize5.png);"></div>
							<p>充电宝</p>
						</div>
						<div class="prize-item" style="">
							<div style="background-image: url(img/Prize4.png);"></div>
							<p>免费贴膜服务</p>
						</div>
						<div class="prize-item" style="">
							<div style="background-image: url(img/Prize3.png);"></div>
							<p>运动蓝牙耳机</p>
						</div>
						<div class="prize-item" style="">
							<div style="background-image: url(img/Prize2.png);"></div>
							<p>购机优惠券</p>
						</div>

					</div>
					<div class="rotateFinger p1RollFinger" id="goBtn"></div>
					<div class="ruleBtn" id="ruleBtn"></div>
					<div class="myPrizeBtn" id="myPrizeBtn"></div>
				</div>
			</div>
		</div>

		<script src="https://wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>
		<script src="js/main.js?v=18"></script>
		<script src="js/fx.js"></script>
		<script src="js/other.js"></script>
		<script>
			//图片加载路径
			var basePath = './';

			////////  接口
			var userData = {}; //用户信息。后台有交互请更新用户信息
			//抽奖的链接  返回数值请参考json格式  code=1 抽奖成功
			// prizeId:    1= 旗舰手机    2=200元购机优惠券  3=耳机   4=免费贴膜服务  5=充电宝  6=wifi上门检测
			userData.getPrizeUrl = "/getPrize.do";
	
			//用户中过的奖品   默认=      1= 旗舰手机    2=200元购机优惠券  3=耳机   4=免费贴膜服务  5=充电宝  6=wifi上门检测
			userData.curPrize = 6;


			
			//请求后台  进行抽奖
			function starGetPrizeFun() {

				//抽奖成功 回调函数  
				var datas={prizeId:1};
				startGetPrizeCallBackFun(datas);
				//显示填写电话弹窗
				// $("#inputPage").removeClass('receivePrizePageMoveOut').addClass('receivePrizePageMoveIn');
				
				// $.ajax({
				// 	url :' '
				// 	type : 'get',
				// 	async : false,
				// 	data : {},
				// 	dataType : 'json',
				// 	success : function(datas) {
				// 		console.log(datas.code)
				// 		showFailTipsEvent(datas.msg, "fail");
				// 		isBegin = false;
						
				// 	},
				// 	error : function() {
				// 		isBegin = false;
				// 		alert('服务器繁忙！');
				// 	}
				// });
			}

			//保存中奖资料  手机号
			function saveDataFun() {
				//这里发奖 -------------------调ajax-----------------
				$.ajax({
					url: '',
					type: 'POST',
					async: false,
					data: {},
					dataType: 'json',
					success: function(datas) { 
					//datas.code  0=提交失败(datas.msg="提交失败的提示")  1=提交成功,  2=已经领取过了
						if(datas.code == 1) {
							
						} else { 
						
							isSavingData = false;
							//失败提示
							showFailTipsEvent(datas.msg, "fail");
						};
					},
					error: function() {
						isSavingData = false;
						alert('服务器繁忙！');
					}
				});
			}

			//获取验证码倒计时
			var InterValObj; //timer变量，控制时间
			var count = 90; //间隔函数，1秒执行
			var curCount; //当前剩余秒数
			var flag = true;
			//timer处理函数  
			function SetRemainTime() {
				if(curCount == 0) {
					window.clearInterval(InterValObj); // 停止计时器  
					flag = true;
					$("#getCodeBtn").removeAttr("disabled");
					$("#getCodeBtn").html("获取验证码");
				} else {
					curCount--;
					$("#getCodeBtn").html("重发(" + curCount + "s)");
				}
			}
			$(document).ready(function() {
				$("#getCodeBtn").click(function(){
					var phoneValue = $.trim($("#tel_input").val());
					var re = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|17[0-9]\d{8}|18[0-9]\d{8}|14[57]\d{8})$/;
					if(phoneValue == "" || !re.test(phoneValue)) {
						alert("请输入有效的手机号！");
						return false;
					}
					if(!flag) {
						return false;
					}
					curCount = count;
					//设置button效果，开始计时
					$("#getCodeBtn").attr("disabled", true);
					$("#getCodeBtn").html("重发(" + curCount + "s)");
					InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
					flag = false;
					//获取手机号码
					$.ajax({
						url: '',
						type: "post",
						dataType: "json",
						data: {phone: phoneValue,},
						success: function(resultdata) {
							if(resultdata.result == "success") {							
								flag = false;
								$("#getCodeBtn").attr("disabled", true);
							} else {
								// FIXME 43验证 用短信接口出现问题:返回错误代码
								window.clearInterval(InterValObj); // 停止计时器  
								flag = true;
								$("#getCodeBtn").html("获取验证码");
								$("#getCodeBtn").removeAttr("disabled");
								alert("错误代码：" + resultdata.result);
							}
						}
					});
				});
				//提交信息，
				$("#submBtn").click(function() {
					alert('立即领取按钮');
					//关闭提交弹出框
					$("#inputPage").removeClass("inputPageMoveIn").addClass("inputPageMoveOut");
					//提交成功页
					showSucceedPage(1);
				});
				//显示我的奖品页面
				$("#myPrizeBtn").on("click",function() {			
					$("#myPrizePage").removeClass("myPrizePageMoveOut").addClass("myPrizePageMoveIn");
				});										
			});
		</script>
	</body>
</html>